.pure-field {
	line-height: var(--pure-field-line-height, 1);
	padding: var(--pure-field-padding, 15px 12px);
	background: var(--pure-field-background, var(--pure-background-element));
	box-sizing: border-box;
	transition: var(--pure-field-transition, all 0.25s ease-in-out);
	position: relative;
	border-top-width: var(--pure-field-border-top-width, 0);
	border-bottom-width: var(--pure-field-border-bottom-width, 0);
	border-left-width: var(--pure-field-border-left-width, 0);
	border-right-width: var(--pure-field-border-right-width, 0);
	border-style: var(--pure-field-border-style, solid);
	border-color: var(--pure-field-border-color, var(--pure-border-color-default));
	--pure-input-padding: var(--pure-field-input-padding, 0);
}

.pure-field-readonly::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.pure-field-readonly .pure-field-wrapper {
	pointer-events: none;
}

.pure-field-border-top {
	border-top-width: var(--pure-field-border-width, 1px);
}

.pure-field-border-bottom {
	border-bottom-width: var(--pure-field-border-width, 1px);
}

.pure-field-wrapper {
	display: var(--pure-field-display, flex);
	flex-direction: var(--pure-field-flex-direction, row);
	align-items: var(--pure-field-align-items, center);
	justify-content: var(--pure-field-justify-content, space-between);
	gap: var(--pure-field-gap, 5px);
}

.pure-field-left {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	align-items: var(--pure-field-left-align-items, center);
	justify-content: var(--pure-field-left-justify-content, flex-start);
	gap: var(--pure-field-gap, 5px);
	padding: var(--pure-field-left-padding);
	margin: var(--pure-field-left-margin);
	box-sizing: border-box;
	width: var(--pure-field-left-width);
	background: var(--pure-field-left-background);
	position: relative;
	align-self: var(--pure-field-left-align-self);
}

.pure-field-required {
	color: var(--pure-field-required-color, var(--pure-theme-danger));
	font-size: var(--pure-field-required-font-size);
	font-weight: var(--pure-field-required-font-weight, bold);
	margin: var(--pure-field-required-margin);
	padding: var(--pure-field-required-padding);
	box-sizing: border-box;
	order: var(--pure-field-required-order, 0);
	align-self: var(--pure-field-required-align-self, flex-start);
}

.pure-field-icon {
	flex-shrink: var(--pure-field-icon-flex-shrink, 0);
	flex: var(--pure-field-icon-flex);
	font-size: var(--pure-field-icon-font-size);
	color: var(--pure-field-icon-color);
	font-weight: var(--pure-field-icon-font-weight);
	width: var(--pure-field-icon-width);
	padding: var(--pure-field-icon-padding);
	margin: var(--pure-field-icon-margin);
	box-sizing: border-box;
	transition: var(--pure-field-icon-transition, all 0.25s ease-in-out);
	position: relative;
}

.pure-field-icon-left {
	font-size: var(--pure-field-left-icon-font-size, var(--pure-field-icon-font-size, var(--pure-font-size-larger)));
	color: var(--pure-field-left-icon-color, var(--pure-field-icon-color));
	font-weight: var(--pure-field-left-icon-font-weight, var(--pure-field-icon-font-weight));
	width: var(--pure-field-left-icon-width, var(--pure-field-icon-width));
	padding: var(--pure-field-left-icon-padding, var(--pure-field-icon-padding));
	margin: var(--pure-field-left-icon-margin, var(--pure-field-icon-margin));
	order: var(--pure-field-left-icon-order, 2);
}

.pure-field-label {
	flex-shrink: var(--pure-field-label-flex-shrink, 0);
	flex: var(--pure-field-label-flex);
	font-size: var(--pure-field-label-font-size);
	color: var(--pure-field-label-color);
	font-weight: var(--pure-field-label-font-weight);
	width: var(--pure-field-label-width);
	padding: var(--pure-field-label-padding);
	margin: var(--pure-field-label-margin);
	text-align: var(--pure-field-label-text-align, left);
	box-sizing: border-box;
	position: relative;
	order: var(--pure-field-label-order, 6);
}

.pure-field-right {
	flex: 1;
	display: flex;
	flex-direction: var(--pure-field-right-flex-direction, row);
	align-items: var(--pure-field-right-align-items, center);
	justify-content: var(--pure-field-right-justify-content);
	gap: var(--pure-field-gap, 5px);
	padding: var(--pure-field-right-padding);
	margin: var(--pure-field-right-margin);
	box-sizing: border-box;
	background: var(--pure-field-right-background);
}

.pure-field-disabled {
	pointer-events: none;
	opacity: var(--pure-field-disabled-opacity, var(--pure-opacity-disabled));
	--pure-field-right-background: var(--pure-field-disabled-background);
}

.pure-field-bofore {
	flex-shrink: var(--pure-field-bofore-flex-shrink, 0);
	flex: var(--pure-field-bofore-flex);
	order: var(--pure-field-bofore-order, 0);
	align-self: var(--pure-field-bofore-align-self);
	box-sizing: border-box;
}

.pure-field-content {
	flex: 1;
	padding: var(--pure-field-content-padding);
	margin: var(--pure-field-content-margin);
	box-sizing: border-box;
	text-align: var(--pure-field-content-text-align, left);
	order: var(--pure-field-content-order, 5);
}

.pure-field-after {
	flex-shrink: var(--pure-field-after-flex-shrink, 0);
	flex: var(--pure-field-after-flex);
	order: var(--pure-field-after-order, 10);
	align-self: var(--pure-field-after-align-self);
	box-sizing: border-box;
}

.pure-field-icon-right {
	font-size: var(--pure-field-right-icon-font-size, var(--pure-field-icon-font-size, var(--pure-font-size-larger)));
	color: var(--pure-field-right-icon-color, var(--pure-field-icon-color, var(--pure-text-color-light)));
	font-weight: var(--pure-field-right-icon-font-weight, var(--pure-field-icon-font-weight));
	width: var(--pure-field-right-icon-width, var(--pure-field-icon-width));
	padding: var(--pure-field-right-icon-padding, var(--pure-field-icon-padding));
	margin: var(--pure-field-right-icon-margin, var(--pure-field-icon-margin));
	transform: var(--pure-field-right-icon-transform, var(--pure-field-right-icon-transform));
	order: var(--pure-field-right-icon-order, 20);
}

.pure-field-tips {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--pure-field-gap, 5px);
	box-sizing: border-box;
	margin-top: var(--pure-field-content-tips-gap, 8px);
}

.pure-field-element-placeholder {
	opacity: 0;
	height: 0;
	overflow: hidden;
	display: var(--pure-field-element-placeholder-display);
}

.pure-field-element-placeholder-left {
	display: var(--pure-field-element-placeholder-left-display);
}

.pure-field-element-placeholder-right {
	display: var(--pure-field-element-placeholder-right-display);
}

.pure-field-tips-content {
	flex: 1;
	font-size: var(--pure-field-tips-font-size, var(--pure-font-size-smaller));
	color: var(--pure-field-tips-color, var(--pure-theme-danger));
	font-weight: var(--pure-field-tips-font-weight);
	padding: var(--pure-field-tips-padding);
	margin: var(--pure-field-tips-margin);
	box-sizing: border-box;
	text-align: var(--pure-field-tips-text-align, left);
}
